import { Box, Stack } from "@mui/material"
import React, { useRef, useState } from "react"
import MusicCard from "./components/MusicCard"
import { useRequest } from "ahooks"
import { getAllMusic, uploadRemote } from "@/services"
import { CapsuleTabs, InfiniteScroll, Loading, SearchBar } from "antd-mobile"
import useInfiniteScroll from "@/hooks/useInfiniteScroll"
import { search } from "@/services/kugou"
import MyMusicCard from "./components/MyMusicCard"
import { message } from "antd"

export default () => {
  const [currentPlay, setCurrentPlay] = useState<any>()
  const [input, setInput] = useState<string>("")
  const [keywords, setkeywords] = useState<string>("")
  const { runAsync } = useRequest((k, params) => search(k, params), {
    manual: true,
  })
  const { runAsync: runMy } = useRequest((params) => getAllMusic(params), {
    manual: true,
  })

  const [mylist, myhasMore, myloadMore] = useInfiniteScroll(
    async (no, size) => {
      const { data } = await runMy({ pageNo: no, pageSize: size })
      return { data, total: data?.length ?? 0 }
    },
  )
  const [activeFilter, setActiveFilter] = useState("ALL")
  const [list, hasMore, loadMore] = useInfiniteScroll(
    async (no, size) => {
      const {
        data: {
          data: { lists, pagesize },
        },
      } = await runAsync(input, { page: no, pageSize: size })
      return { data: lists, total: pagesize }
    },
    { refresh: [keywords] },
  )

  return (
    <>
      <Box sx={{ p: 2 }}>
        <SearchBar
          style={{ "--background": "#ffffff" }}
          showCancelButton
          value={input}
          onBlur={() => {
            setkeywords(input)
          }}
          onChange={(val) => {
            setInput(val)
          }}
          placeholder="搜索"
        />
      </Box>
      <Box
        sx={{
          ".adm-capsule-tabs-header": {
            py: 0,
          },
          ".adm-capsule-tabs-tab-wrapper": {
            width: 50,
            flex: "none",
            ".adm-capsule-tabs-tab": {
              fontSize: 12,
              padding: "4px",
              width: "inherit",
            },
          },
        }}
      >
        <CapsuleTabs
          activeKey={activeFilter}
          onChange={(key) => {
            setActiveFilter(key)
          }}
        >
          {/* <CapsuleTabs.Tab title="全部" key="All">
              <SourceList></SourceList>
            </CapsuleTabs.Tab> */}
          <CapsuleTabs.Tab title="全部" key="ALL">
            <Stack spacing={2} sx={{ p: 0, alignItems: "center" }}>
              {list?.map((item: any, index: number) => {
                return (
                  <MusicCard
                    value={{
                      ...item,
                      url:
                        window.alignConfig.blogSourceMinio +
                        "/musics/" +
                        item.url,
                      cover: item?.Image?.replace("{size}", 240),
                      artist: item.singer,
                    }}
                    onToggle={(value) => {
                      setCurrentPlay(value)
                    }}
                    canPlay={
                      !currentPlay ||
                      currentPlay?.url ===
                        window.alignConfig.blogSourceMinio +
                          "/musics/" +
                          item.url
                    }
                    key={index}
                  ></MusicCard>
                )
              })}
              <InfiniteScroll
                hasMore={hasMore}
                loadMore={loadMore}
              ></InfiniteScroll>
            </Stack>
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title="我的" key="My">
            <Stack spacing={2} sx={{ p: 0, alignItems: "center" }}>
              {mylist?.map((item: any, index: number) => {
                return (
                  <MyMusicCard
                    value={{
                      ...item,
                      url:
                        window.alignConfig.blogSourceMinio +
                        "/musics/" +
                        item.url,
                      cover:
                        window.alignConfig.blogSourceMinio +
                        "/musiccovers/" +
                        item.cover,
                      artist: item.singer,
                    }}
                    onToggle={(value) => {
                      setCurrentPlay(value)
                    }}
                    canPlay={
                      !currentPlay ||
                      currentPlay?.url ===
                        window.alignConfig.blogSourceMinio +
                          "/musics/" +
                          item.url
                    }
                    key={index}
                  ></MyMusicCard>
                )
              })}
              <InfiniteScroll
                hasMore={myhasMore}
                loadMore={myloadMore}
              ></InfiniteScroll>
            </Stack>
          </CapsuleTabs.Tab>
        </CapsuleTabs>
      </Box>
    </>
  )
}
